<template>
  <div class="content">
    <el-container>
      <el-header>
        <div class="header_left">后台管理</div>
        <div class="header_right">
          <span style="margin-right: 10px;">{{ user.username }}</span>
          <el-menu
              mode="horizontal"
              @select="headerMenuSelect"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#fff">
            <el-submenu index="info">
              <template slot="title">个人中心</template>
              <el-menu-item index="update">修改</el-menu-item>
            </el-submenu>
            <el-menu-item index="exit">退出</el-menu-item>
          </el-menu>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
              :default-active="currentActive[currentActive.length - 1]"
              :default-openeds="currentActive"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
              router
              @select="menuSelect">
            <!--            <el-menu-item index="-1" route="/home">-->
            <!--              <template slot="title">-->
            <!--                <i class="el-icon-s-home"></i>-->
            <!--                <span>首页</span>-->
            <!--              </template>-->
            <!--            </el-menu-item>-->
            {{menus}}
            <el-menu-item v-for="item in menus" :index="item.id.toString()" :key="item.id" :route="item.url">
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ item.name }}</span>
              </template>
                  <el-menu-item v-for="child in item.children" :index="child.id.toString()" :key="child.id"
                                :route="child.url">
                    <template slot="title">
                      <i :class="child.icon"></i>
                      <span>{{ child.name }}</span>
                    </template>
                  </el-menu-item>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item to="/home" replace>首页</el-breadcrumb-item>
              <el-breadcrumb-item v-for="item in this.breadcrumb" :to="item.url" :key="item.id" replace>{{
                  item.name
                }}
              </el-breadcrumb-item>
            </el-breadcrumb>
            <router-view/>
          </el-main>
<!--          <el-footer>-->
<!--              <a href="https://beian.miit.gov.cn" style="text-decoration: none; color: #FFFFFF;display: block;line-height: 60px;text-align: center;" target="_blank">陇ICP备2022001768号-1</a>-->
<!--          </el-footer>-->
        </el-container>
      </el-container>
    </el-container>
<!--    <el-container>-->
<!--      -->

<!--&lt;!&ndash;      <el-container>&ndash;&gt;-->
<!--&lt;!&ndash;        &ndash;&gt;-->
<!--&lt;!&ndash;        &ndash;&gt;-->
<!--&lt;!&ndash;        <el-footer>&ndash;&gt;-->
<!--&lt;!&ndash;          <div align="center">&ndash;&gt;-->

<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-footer>&ndash;&gt;-->
<!--&lt;!&ndash;      </el-container>&ndash;&gt;-->
<!--    </el-container>-->
    <el-dialog
        :title="form.id ? '修改' : '添加'"
        :visible.sync="dialogShow"
        width="600px"
        @close="dialogClose"
    >
      <el-form ref="form" :model="form" label-width="100px" :rules="rules">
        <el-form-item prop="username" label="用户名">
          <el-input type="text" placeholder="请输入用户名" v-model="form.username"/>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input type="password" placeholder="请输入密码(默认为123456)" v-model="form.password"/>
        </el-form-item>
        <el-form-item prop="phone" label="联系电话">
          <el-input type="text" placeholder="请输入联系电话" v-model="form.phone"/>
        </el-form-item>
        <el-form-item prop="description" label="备注">
          <el-input type="textarea" placeholder="请输入备注" v-model="form.description"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">保存</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { removeToken } from "../util/auth";
export default {
  name: "Index",
  data() {
    return {
      menus: [
        // {
        //   id: '',
        //   name: '',
        //   url: '',
        //   icon: ''
        // }
        // {
        //   id: 1,
        //   name: '管理员管理',
        //   url: '/admin',
        //   icon: 'el-icon-s-custom'
        // },
        // // {
        // //   id: 2,
        // //   name: '文章管理',
        // //   url: '/article',
        // //   icon: 'el-icon-s-custom'
        // // },
        // {
        //   id: 3,
        //   name: '用户管理',
        //   url: '/user',
        //   icon: 'el-icon-s-custom'
        // },
        // // {
        // //   id: 4,
        // //   name: '商品类型管理',
        // //   url: '/goods-type',
        // //   icon: 'el-icon-s-custom'
        // // },
        // // {
        // //   id: 5,
        // //   name: '商品管理',
        // //   url: '/goods',
        // //   icon: 'el-icon-s-custom'
        // // },
        // // {
        // //   id: 6,
        // //   name: '订单管理',
        // //   url: '/order',
        // //   icon: 'el-icon-s-custom'
        // // },
        // // {
        // //   id: 7,
        // //   name: '评论管理',
        // //   url: '/comment',
        // //   icon: 'el-icon-s-custom'
        // // },
        // // {
        // //   id: 8,
        // //   name: '人员类型管理',
        // //   url: '/personnel-type',
        // //   icon: 'el-icon-s-custom'
        // // },
        // // {
        // //   id: 9,
        // //   name: '人员管理',
        // //   url: '/personnel',
        // //   icon: 'el-icon-s-custom'
        // // },
        // // {
        // //   id: 10,
        // //   name: '系统配置',
        // //   url: '/setting',
        // //   icon: 'el-icon-s-custom'
        // // },
        // {
        //   id: 11,
        //   name: '报告管理',
        //   url: '/product',
        //   icon: 'el-icon-s-custom'
        // },
        // // {
        // //   id: 12,
        // //   name: '检验报告',
        // //   url: '/report',
        // //   icon: 'el-icon-s-custom'
        // // },
        // {
        //   id: 13,
        //   name: '报告审批',
        //   url: '/productAudit',
        //   icon: 'el-icon-s-custom'
        // },
        // {
        //   id: 14,
        //   name: '检验报告审核',
        //   url: '/reportAudit',
        //   icon: 'el-icon-s-custom'
        // },
        // {
        //   id: 15,
        //   name: '推广鉴定报告审核',
        //   url: '/productInfoAudit',
        //   icon: 'el-icon-s-custom'
        // }
      ],
      currentActive: ['1'],
      breadcrumb: [],
      rules: {
        username: [
          {
            required: true,
            type: 'string',
            message: '用户名不能为空',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 30,
            message: '用户名长度在3-30位之间',
            trigger: 'blur'
          },
          {
            pattern: /^[0-9A-Za-z_]{3,30}$/,
            message: '用户名只能包含数字、字母、下划线',
            trigger: 'blur'
          },
          {
            validator: (rule, val, cb) => {
              let url = `admin/repeat?username=${val}`
              if (this.form.id) url += `&id=${this.form.id}`
              this.$http.get(url).then(res => {
                if (res.code === 200) {
                  if (res.data) {
                    return cb(new Error('用户名已存在！'))
                  }
                  cb()
                }
              })
            },
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: false,
            type: 'string',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 30,
            message: '密码长度在6-30位之间',
            trigger: 'blur'
          },
          {
            pattern: /^[a-zA-Z0-9-*/+.~!@#$%^&*()]{6,30}$/,
            message: '密码只能包含数字、字母、特殊字符',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            type: 'string',
            message: '电话不能为空',
            trigger: 'blur'
          },
          {
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '电话号码格式不正确',
            trigger: 'blur'
          }
        ],
        description: [
          {
            min: 0,
            max: 800,
            message: '备注长度在3-800位之间',
            trigger: 'blur'
          }
        ]
      },
      form: {},
      user: {},
      dialogShow: false
    }
  },
  mounted() {
    if (sessionStorage.getItem('currentActive')) this.currentActive = [sessionStorage.getItem('currentActive')]
    if (JSON.parse(sessionStorage.getItem('menuList'))) this.menus = JSON.parse(sessionStorage.getItem('menuList')).map(item => {
      return {
        id: item.id,
        name: item.name,
        url: item.url,
        icon: 'el-icon-s-custom',
        children: item.children.map(ch => {
          return {
            id: ch.menuId,
            name: ch.menuName,
            url: ch.path,
            icon: 'el-icon-s-custom'
          }
        })
      }
    });
    this.menus.push({
      id: 100,
      name: '检验报告',
      url: '/reportShow',
      icon: 'el-icon-s-custom'
    });
    this.menus.push({
      id: 101,
      name: '推广鉴定报告',
      url: '/productInfoShow',
      icon: 'el-icon-s-custom'
    });
    console.log(this.menus);
    // this.getInfo()
  },
  methods: {
    // getInfo() {
    //   this.$http.get('info').then(res => {
    //     if (res.code === 200) {
    //       this.user = res.data
    //     }
    //   })
    // },
    dialogClose() {
      this.$refs['form'].clearValidate()
    },
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$http.put(`admin`, this.form).then(res => {
            if (res.code === 200) {
              this.$Message.success(res.msg)
              this.getInfo()
              this.dialogShow = false
            }
          })
        }
      });
    },
    headerMenuSelect(key) {
      switch (key) {
        case 'update':
          this.form = {...this.user};
          this.dialogShow = true;
          break;
        case 'exit':
          // this.$http.post('logout').then(res => {
          //   if (res.code === 200) {
          //     this.$message.success(res.msg)
              this.$router.push('/login')
              removeToken()
              // sessionStorage.removeItem('currentActive')
            // }
          // })
      }
    },
    menuSelect(key, keyPath) {
      sessionStorage.setItem('currentActive', keyPath);
      this.getBreadcrumb(keyPath)
    },
    getRouter(){
      // eslint-disable-next-line no-unused-vars
      const menuList = JSON.parse(sessionStorage.getItem('menuList'));
      console.log("aaa",menuList)
      // this.menus.id = menuList.data.menuList.menuId
      // this.menus.name = menuList.data.menuList.menuName
      // this.menus.url = menuList.data.menuList.path
      // this.menus.icon = menuList.data.menuList.icon
    },
    getBreadcrumb(keyPath) {
      this.breadcrumb = []
      if (keyPath.length === 1 && keyPath[0] === '-1') return
      let menus = this.menus;
      keyPath.forEach(item => {
        const obj = menus.filter(v => v.id.toString() === item)[0];
        if (obj.url !== '#') this.breadcrumb.push(obj)
        menus = obj.children
      })
    },
  },
  watch: {
    $route: {
      handler(val) {
        if (val.path === '/home') {
          this.currentActive = ['-1']
          this.breadcrumb = []
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">

.el-header {
  padding: 0;
  background-color: #545c64;
  color: #FFF;
  line-height: 60px;
  display: flex;
  justify-content: space-between;

  .header_left {
    width: 200px;
    height: 100%;
    font-size: 20px;
    text-align: center;
  }

  .header_right {
    width: auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
}

.el-container {
  height: calc(100vh - 60px);
  .el-aside {
    background-color: rgb(84, 92, 100);
  }
}

.el-footer {
  background-color: rgb(84, 92, 100);
}
</style>
